<template>
    <el-table :data="tableData" height="550" style="width: 100%" v-loading="loading">
        <el-table-column label="产品图片" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <img :src="scope.row.orderDetail[0].imageUrl" shape="square" width="100" height="40"
                        @error="errorpj" />
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="order_id" label="订单编号" width="280" />
        <el-table-column prop="orderDetail[0].productName" label="产品名称" />
        <el-table-column prop="orderDetail[0].quantity" label="数量" />
        <el-table-column prop="total_fee" label="总价格" />
        <el-table-column prop="create_time" label="创建时间" width="180" />
        <el-table-column prop="pay_status" label="支付状态" />
        <el-table-column prop="order_status" label="订单状态" />
        <el-table-column label="操作" width="280">
            <template #default="scope">
                <!-- {{scope.row.order_status}} -->
                <el-button style="background-color: #a0cfff;color: #fff;"
                    :disabled="scope.row.pay_status  === '已支付' || scope.row.order_status ==='交易关闭'"
                    @click="gopay(scope.row.order_id)">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <span>去支付</span>
                </el-button>
                <el-button style="background-color:#f56c6c;color: #fff;" @click="delitem(scope.row.order_id)">
                    <el-icon>
                        <Delete />
                    </el-icon>
                    <span>删除</span>
                </el-button>
            </template>
        </el-table-column>

    </el-table>
</template>


<script setup>



import { ref, onMounted } from "vue"
import *as api from "../../../../api/vip.js"
import { ElMessage, ElMessageBox } from "element-plus"
import {useRouter} from "vue-router"

let router = useRouter()



//定义tableData
let tableData = ref([])

//定义加载动画
let loading = ref(true)


let gopay = (id) => {

    // let res = await api.addOrder(id)
    // console.log(res.data.order_id);
    router.push({
        path: '/statice/pay',
        query: {
            id: id
        }
    })
}

let getList = async () => {

    try {
        loading.value = true
        let res = await api.getOrder()
        loading.value = false
        console.log(res, "lll");
        tableData.value = res.data.data
        tableData.value.forEach((p) => {
            if (p.order_status === 0) {
                p.order_status = "未提交"
            } else if (p.order_status === 1) {
                p.order_status = "提交成功 "
            } else if (p.order_status === 2) {
                p.order_status = "已经取消 "
            } else if (p.order_status === 3) {
                p.order_status = "无效订单 "
            } else if (p.order_status === 4) {
                p.order_status = "交易关闭 "
            }
            if (p.pay_status === 1) {
                p.pay_status = "已支付"
            } else {
                p.pay_status = "未支付"
            }

        })

    } catch (error) {
        loading.value = false
    }
}


//删除接口
let delitem = async (id) => {
    ElMessageBox.confirm(
        '你要永久删除吗?',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(
            async () => {
                let res = await api.delOrder(id)
                getList()
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
            }

        )
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
    // try {
    //     let res = await api.delOrder(id)
    //     getList()

    // } catch (error) {
    //     console.log(error);
    // }
}





onMounted(() => {
    getList()
})
</script>
<script>
export default {
    meta: {
        title: 'order', name: '订单管理', icon: "icon-jichuguanli"
    }
}
</script>